<!--
 * @Author: fcli
 * @Date: 2023-09-04 10:32:44
 * @LastEditors: fcli
 * @LastEditTime: 2023-11-28 10:55:41
 * @FilePath: /mapEdit/src/App.vue
 * @Description: 
-->

<template>
  <div class="content">
    <div id="map"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const myMap = ref();
// 是否处于画圈状态下
//const drawing = ref(false);
// 是否处于鼠标左键按下状态下
const isMouseDown = ref(false);
// 存储画出折线点的数组
const polyPointArray = ref([]);
// 上次操作画出的折线
const lastPolyLine = ref(null);
// 画圈完成后生成的多边形
const polygonAfterDraw = ref(null);

//绘制
const drawMap = () => {
  document.addEventListener('touchend', () => {
    if (isMouseDown.value) {
      // 退出画线状态
      isMouseDown.value = false;
      // 添加多边形覆盖物,设置为禁止点击
      polygonAfterDraw.value = new AMap.Polygon({
        fillOpacity: 0.5,
        fillColor: '#7bccc4',
        strokeOpacity: 1,
        strokeColor: '#3366FF',
        strokeWeight: 4,
        strokeStyle: 'solid',
        strokeDasharray: [5, 5],
        //多边形数据
        path: polyPointArray.value //多边形轮廓
      });

      myMap.value.add(polygonAfterDraw.value);
      if (lastPolyLine.value) {
        myMap.value.remove(lastPolyLine.value)
      }

      myMap.value.setStatus({
        showIndoorMap: true,
        dragEnable: true,
        keyboardEnable: true,
        doubleClickZoom: true,
        zoomEnable: true,
        rotateEnable: true
      });

    }
  });

  myMap.value.on('touchstart', () => {
    myMap.value.setStatus({
      showIndoorMap: false,
      dragEnable: false,
      keyboardEnable: false,
      doubleClickZoom: false,
      zoomEnable: false,
      rotateEnable: false
    });
    if (lastPolyLine.value) {
      myMap.value.remove(lastPolyLine.value)
    }

    if (polygonAfterDraw.value) {
      myMap.value.remove(polygonAfterDraw.value)
    }
    lastPolyLine.value = null;
    polyPointArray.value = [];
    isMouseDown.value = true;
  });

  myMap.value.on('touchmove', (e: any) => {
    if (isMouseDown.value) {
      const point = [e.lnglat.lng, e.lnglat.lat]
      polyPointArray.value.push(point);
      if (lastPolyLine.value) {
        myMap.value.remove(lastPolyLine.value)
      }

      const polyline = new AMap.Polyline({
        path: polyPointArray.value, //多边形轮廓
        isOutline: true,
        strokeColor: "#3366FF",
        strokeOpacity: 1,
        strokeWeight: 2,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [15, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
      });
      myMap.value.add([polyline])
      lastPolyLine.value = polyline;
    }
  });
}

onMounted(() => {
  //创建了一个回调函数,高德地图加载完毕会调用
  window.onload = () => {
    // 所有关于地图的逻辑全部都要写在这个回调里面
    // 保证高德地图加载完毕
    myMap.value = new AMap.Map('map', { resizeEnable: true, center: [121.429516, 31.151997], zoom: 13 });
    drawMap();
  };
  // key是申请的值
  let url = 'https://webapi.amap.com/maps?v=2.0&key=0cc611512938634634bac0969fdef3c1';
  //创建一个 script dom元素
  let jsapi = document.createElement('script');
  //设定script标签属性
  jsapi.src = url;
  //将API文件引入页面中,加载完毕以后会调用函数
  document.head.appendChild(jsapi);
})

</script>
<style>
.content,
#map {
  height: 100%;
  width: 100%;
}
</style>